<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<!-- <link rel="stylesheet" type="text/css" href="css/reset.css" /> -->
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<style type="text/css">
	</style>
</head>

<body>

	<header>

	</header>

	<!-- 轮播图 -->
	<div id="banner">
		<div id="bannerImg">
			<input type="button" name="" id="btnPrevious" />
			<input type="button" name="" id="btnNext" />
		</div>

		<div id="bannerHeng">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	<section>
		<div class="banxin">

			<!-- 内容区 -->
			<div id="maincontent">
				<!-- 明星单品 -->
				<div class="startShop ">
					<h3 id="wwww" class=" " a="animate__animated animate__slideInUp">明星单品</h3>
					<p class="tenStar">
						十大当季明星单品
						<a class="goToStarList" href="#">
							<span>查看榜单</span>
							<i></i>
						</a>
					</p>
					<ul class="">
						<li class="wow fadeInUp animated" data-wow-duration="1s" style="visibility: visible; animation-name: fadeInUp;">
							<a href="" class="starShopImg">
								<img src="img/index/starShop1.jpg">
							</a>
							<div class="starShopblock">
								<i></i>
								<span>保湿滋润</span>
								<span>无限回购</span>
								<span>明星推荐</span>
							</div>
							<div class="starShoptip">
								<p class="sp_p1" title="「小紫瓶精华」3种成分 击退熬夜肌">「小紫瓶精华」3种成分 击退熬夜肌</p>
								<p class="sp_p2">凝时鲜颜肌活修护小紫瓶精华液</p>
								<p class="sp_p3">35ml / ¥240.00</p>
								<a href="">立即购买</a>
							</div>
						</li>
						<li class="wow fadeInUp animated" data-wow-duration="1.5s" style="visibility: visible; animation-name: fadeInUp;">
							<a href="" class="starShopImg">
								<img src="img/index/starShop2.png">
							</a>
							<div class="starShopblock">
								<i></i>
								<span>无限回购</span>
								<span>淡化细纹</span>
								<span>焕亮眼周</span>
							</div>
							<div class="starShoptip">
								<p class="sp_p1" title="「小紫瓶熬夜眼霜」熬夜不怕熊猫眼">「小紫瓶熬夜眼霜」熬夜不怕熊猫眼</p>
								<p class="sp_p2">凝时鲜颜肌活修护眼霜 小紫瓶熬夜眼霜</p>
								<p class="sp_p3">15g / ¥240.00</p>
								<a href="">立即购买</a>
							</div>
						</li>

						<li class="wow fadeInUp animated" data-wow-duration="2s" style="visibility: visible; animation-name: fadeInUp;">
							<a href="" class="starShopImg">
								<img src="img/index/starShop3.png">
							</a>
							<div class="starShopblock">
								<i></i>
								<span>滋养保湿</span>
								<span>摆脱暗沉</span>
								<span>无限回购</span>
							</div>
							<div class="starShoptip">
								<p class="sp_p1" title="「烟酰胺安瓶面膜」4%烟酰胺，肌肤“橡皮擦”">「烟酰胺安瓶面膜」4%烟酰胺，肌肤“橡皮擦”</p>
								<p class="sp_p2">烟酰胺细致提亮安瓶面膜</p>
								<p class="sp_p3">(1.5ml+33ml)*5 / ¥138.00</p>
								<a href="">立即购买</a>
							</div>
						</li>

					</ul>
					<dl>
						<dd class="wow bounceInLeft" data-wow-duration="1s" style="visibility: visible; animation-name: bounceInLeft;">
							<a href="#"><img alt="" loading="lazy" src="img/index/starShop4.png" /></a>
							<div class="tips">
								<p class="ten_tips1">
									<i></i>
									<span>持久妆效</span>
									<span>养肤提亮</span>
									<span>明星好物</span>
								</p>
								<div class="ten_tips3">
									<p class="tips3_p1" title="「持妆粉底液」高遮瑕 长持妆 不暗沉">「持妆粉底液」高遮瑕 长持妆 不暗沉</p>
									<p class="tips3_p2">油皮亲妈*感光无瑕持妆粉底液</p>
									<p class="tips3_p3">30ml / ¥150.00</p>
									<a href="#">立即购买</a>
								</div>
							</div>
						</dd>
						<dd class="wow bounceInRight" data-wow-duration="2s" style="visibility: visible; animation-name: bounceInRight;">
							<a href="#"><img alt="" loading="lazy" src="img/index/starShop5.jpg" /></a>
							<div class="tips">
								<p class="ten_tips1">
									<i></i>
									<span>补水救星</span>
									<span>温和舒缓</span>
									<span>高性价比</span>
								</p>
								<div class="ten_tips3">
									<p class="tips3_p1" title="「冰肌水」堪比精华液的冰肌水">「冰肌水」堪比精华液的冰肌水</p>
									<p class="tips3_p2">雪域纯粹滋润冰肌水 清润型</p>
									<p class="tips3_p3">160ml / ¥150.00</p>
									<a href="#">立即购买</a>
								</div>
							</div>
						</dd>
					</dl>


				</div>
				<!-- 好物推荐 -->
				<div class="goodShop "   >
					<h3>好物推荐</h3>
					<div class="hufu wow  bounceInDown animated" data-wow-duration="1.5s" data-wow-delay="0.5s" style="visibility: visible; animation-name:  bounceInDown;" >
						<a href="#"><img alt="" loading="lazy" src="img/index/hufuBg.png" /></a>
						<ul>
							<li>
								<a href="#"><img alt="" loading="lazy" src="img/index/mianmo.png" /></a>
							</li>
							<li>
								<a href="#"><img alt="" loading="lazy" src="img/index/caizhuang.png" /></a>
							</li>
							<li>
								<a href="#"><img alt="" loading="lazy" src="img/index/nanshi.png" /></a>
							</li>
							<li>
								<a href="#"><img alt="" loading="lazy" src="img/index/gehu.png" /></a>
							</li>
						</ul>
					</div>
					<div class="zhongcao wow fadeInUpBig " data-wow-duration="1.5s" data-wow-delay="0.5s" style="visibility: visible; animation-name: fadeInUpBig;">
						<a href="#">
							<img alt="" loading="lazy" src="img/index/zhongcaoBg.png" />
							<p>宝藏女孩的变美秘籍，你get了嘛？</p>
						</a>
					</div>
					<div class="questionnaire wow flipInX animated " data-wow-duration="1.5s" data-wow-delay="0.5s" style="visibility: visible; animation-name: flipInX;">
						<a href="#" style="display: block; width: 100%; height: 100%">
							<div class="p">
								<p>好物选择</p>
								<p>适合我的产品</p>
							</div>
							<p class="queBtn">问卷及推荐</p>
						</a>
					</div>
				</div>
				<!-- 关于自然堂 -->
				<div class="aboutChcedo " >
					<h3>关于自然堂</h3>

					<!-- 	 poster="img/index/about_pc.jpg" -->
					<div class="video">
						<video src="" muted="muted" autoplay="autoplay" controls="controls"></video>

						<!-- src="https://chandoweb.oss-cn-shanghai.aliyuncs.com/fz/video/about_%201350_630.mp4" -->
						<div class="menbanV">
							<img alt="" loading="lazy" title="11" src="img/index/play.png" />
						</div>
					</div>
					<ul class="aboutList" >
						<li >
							<a href="#">
								<img alt="" loading="lazy" src="img/index/about1.png" />
							</a>
						</li>
						<li>
							<a href="#">
								<img alt="" loading="lazy" src="img/index/about2.png" />
							</a>
						</li>
						<li>
							<a href="#">
								<img alt="" loading="lazy" src="img/index/about3.png" />
							</a>
						</li>
						<li>
							<a href="#">
								<img alt="" loading="lazy" src="img/index/about4.png" />
							</a>
						</li>
						<li>
							<a href="#">
								<img alt="" loading="lazy" src="img/index/about5.png" />
							</a>
						</li>
						<li>
							<a href="#/">
								<img alt="" loading="lazy" src="img/index/about6.png" />
							</a>
						</li>
					</ul>
				</div>
			</div>


		</div>
		<!-- style="display: none;" -->
		<a id="toTop"></a>
	</section>
	<div id="footer">

	</div>

</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/cookieTools.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" charset="utf-8"></script>
<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
   new WOW().init();
</script>